<template>
	<view class="gui-padding gui-margin-top">
		<view class="gui-h4 gui-padding gui-border-b">
			{{formData.type_text}}登录
		</view>
		<!-- <view>
			{{formData.open_id}}
		</view> -->
		<form @submit="submit" class="gui-padding">
			<view class="gui-form-item gui-border-b" style="padding-top: 10rpx;">
				<text style="color: red;">*</text>
				<text class="gui-form-label gui-secondary-text">账号:</text>
				<view class="gui-form-body">
					<input type="text" class="gui-form-input" v-model="formData.name" name="name"
						placeholder="请输入柳钢之家登录账号" />
				</view>
			</view>

			<view class="gui-form-item gui-border-b" style="padding-top: 10rpx">
				<text style="color: red;">*</text>
				<text class="gui-form-label gui-secondary-text">手机号:</text>
				<view class="gui-form-body ">
					<input type="text" class="gui-form-input" v-model="formData.phone" name="phone"
						placeholder="请输入柳钢之家绑定手机号" />
				</view>
			</view>

			<view class="gui-form-item gui-border-b" style="padding-top: 10rpx">
				<text style="color: red;">*</text>
				<text class="gui-form-label gui-secondary-text">验证码:</text>
				<view class="gui-form-body gui-flex gui-row gui-nowrap gui-space-between gui-align-items-center">
					<input type="text" class="gui-form-input" v-model="formData.sms_code" name="sms_code"
						placeholder="请输入验证码" />
					<text class="sendmsg gui-block gui-border-l gui-text-right gui-primary-color"
						@tap="getVCode">{{vcodeBtnName}}</text>
				</view>
			</view>

			<!-- <view class="gui-h4 gui-padding gui-border-b" style="margin-top: 20rpx;">
				重置登录密码(可选)
			</view>
			<view class="gui-form-item gui-border-b ">
				<text class="gui-form-label gui-secondary-text">新密码</text>
				<view class="gui-form-body">
					<input type="text" class="gui-form-input" v-model="formData.password" name="password"
						placeholder="请输入新密码(可选)" />
				</view>
			</view>
			<view class="gui-form-item gui-border-b">
				<text class="gui-form-label gui-secondary-text">确认密码</text>
				<view class="gui-form-body">
					<input type="text" class="gui-form-input" v-model="formData.password2" name="password2"
						placeholder="请再次输入新密码((可选))" />
				</view>
			</view> -->
			<view style="margin-top:38rpx;">
				<button type="default" class="gui-button gui-bg-primary gui-noborder" formType="submit"
					style="border-radius:50rpx;">
					<text class="gui-color-white gui-button-text">确定绑定</text>
				</button>
			</view>

		</form>
	</view>
</template>

<script>
	import graceChecker from "@/Grace6/js/checker.js";

	export default {
		data() {
			return {

				vcodeBtnName: "发送验证码",
				countNum: 120,
				countDownTimer: null,
				openid: '',
				countNum: 60,
				countDownTimer: null,
				formData: {
					phone: '',
					sms_code: '',
					name: '',
					password: '',
					password2: '',
					open_id: '',
					type: "wx",
					type_text: "微信"
				}
			}
		},
		onLoad(opt) {
			console.log("wx_bind", opt);
			this.formData.open_id = opt.openid;
			if (opt.type) {
				this.formData.type = opt.type;
				if (opt.type == "ios") {
					this.formData.type_text = "Apple登录";
				}
			}
		},
		methods: {
			submit() {
				var rule = [{
							name: "phone",
							checkType: "phoneno",
							checkRule: "",
							errorMsg: "手机号码有误"
						},
						{
							name: "name",
							checkType: "string",
							checkRule: "4,12",
							errorMsg: "账号格式有误,6位以上"
						},
						// 	{
						// 		name: "sms_code",
						// 		checkType: "string",
						// 		checkRule: "6",
						// 		errorMsg: "验证码格式有误"
						// 	},
						];
						// if (this.formData.password != '') {
						// 	if (this.formData.password != this.formData.password2) {
						// 		uni.showToast({
						// 			icon: "none",
						// 			title: "您输入的二次密码不一致,请重新输入"
						// 		});
						// 		return;
						// 	} else {
						// 		const regex = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}$/;
						// 		if (!regex.test(this.formData.password)) {
						// 			uni.showToast({
						// 				icon: "none",
						// 				title: "密码格式有误,要求必须包括字母和数字"
						// 			});
						// 		}
						// 	}
						// }
						var checkRes = graceChecker.check(this.formData, rule);

						if (checkRes) {
							console.log("login_bind", this.formData);
							this.$boya.NPost("/app/login_bind", this.formData, function(res) {
								console.log("wx_bind", res);
								uni.showToast({
									title: res.msg
								});
								uni.reLaunch({
									url: "/pages/login/login"
								})
							});
						} else {
							uni.showToast({
								title: graceChecker.error,
								icon: "none"
							});

						}
					},
					getVCode() {
						let self = this;
						var rule = [{
							name: "phone",
							checkType: "phoneno",
							checkRule: "",
							errorMsg: "手机号码有误"
						}, ];
						var checkRes = graceChecker.check(this.formData, rule);
						if (checkRes) {
							this.$boya.NGet("/app/sms_code", {
								phone: this.formData.phone
							}, function(res) {
								console.log(res);
								self.countNum = 60;
								self.countDownTimer = setInterval(() => {
									self.countDown();
								}, 1000);
								//self.formData.sms_code=res.data;
							});
						} else {
							uni.showToast({
								title: graceChecker.error,
								icon: "none"
							});

						}
					},
					countDown() {
						if (this.countNum < 1) {
							clearInterval(this.countDownTimer);
							this.vcodeBtnName = "重新发送";
							return;
						}
						this.countNum--;
						this.vcodeBtnName = this.countNum + '秒重发';
					},
			}
		}
</script>

<style>
	.sendmsg {
		height: 30rpx;
		width: 200rpx;
		font-size: 24rpx;
		line-height: 30rpx;
	}
</style>